<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Mermaid 图表绘制工具文档</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Mermaid 图表绘制工具的官方文档">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
  <style>
    :root {
      --theme-color: #42b983;
    }
    .sidebar > h1 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    .markdown-section {
      max-width: 900px;
    }
    .markdown-section h1 {
      font-size: 2rem;
    }
    .markdown-section h2 {
      font-size: 1.5rem;
    }
    .markdown-section pre {
      border-radius: 6px;
    }
    /* 导航栏样式 */
    .nav-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .nav-logo {
      font-weight: bold;
      color: var(--theme-color);
      text-decoration: none;
      font-size: 18px;
    }
    .nav-links {
      display: flex;
      gap: 20px;
    }
    .nav-link {
      text-decoration: none;
      color: #333;
      transition: color 0.3s;
    }
    .nav-link:hover {
      color: var(--theme-color);
    }
    /* 调整主内容区域的边距，避免被导航栏遮挡 */
     .sidebar {
       padding-top: 60px !important;
     }
     .sidebar-nav {
       margin-top: 20px !important;
     }
  </style>
</head>
<body>
  <!-- 顶部导航栏 -->
  <div class="nav-bar">
    <a href="../index.html" class="nav-logo">ACE Mermaid</a>
    <div class="nav-links">
      <a href="../index.html" class="nav-link">首页</a>
      <a href="../editor.html" class="nav-link">编辑器</a>
      <a href="../demos.html" class="nav-link">示例</a>
      <a href="index.html" class="nav-link" style="color: var(--theme-color);">文档</a>
    </div>
  </div>
  
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: 'Mermaid 图表绘制工具',
      repo: 'https://github.com/ace-team/mermaid-draw',
      loadSidebar: true,
      subMaxLevel: 2,
      auto2top: true,
      coverpage: true,
      onlyCover: false,
      homepage: 'README.md',
      routerMode: 'hash',
      relativePath: true,
      // 搜索配置
      search: {
         maxAge: 86400000,
         paths: 'auto',
         placeholder: '搜索',
         noData: '没有结果',
         depth: 2
       },
       // 复制代码配置
       copyCode: {
         buttonText: '复制',
         errorText: '复制失败',
         successText: '已复制'
       },
       // 调试插件
       plugins: [
         function(hook, vm) {
           hook.ready(function() {
             console.log('Docsify ready, sidebar:', vm.config.loadSidebar);
             console.log('Current route:', window.location.hash);
           });
           hook.doneEach(function() {
             console.log('Route changed, sidebar loaded');
             console.log('New route:', window.location.hash);
             // 检查侧边栏是否存在
             setTimeout(function() {
               const sidebar = document.querySelector('.sidebar');
               const sidebarNav = document.querySelector('.sidebar-nav');
               console.log('Sidebar element:', sidebar);
               console.log('Sidebar nav element:', sidebarNav);
             }, 1000);
           });
           hook.beforeEach(function(content) {
             console.log('Before each route, content length:', content.length);
             return content;
           });
         }
       ]
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
  <!-- 搜索插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  <!-- 代码复制插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
</body>
</html>